<div class="container-fluid">
	<h4 class="c-grey-900 mT-10 mB-30"
		th:text="#{valid.service.admin.title}"></h4>
	<div class="row">
		<div class="col-md-12">
			<div class="bgc-white bd bdrs-3 p-20 mB-20">
				<h4 class="c-grey-900 mB-20" th:text="#{table.valid.service.title}"></h4>
				<table id="validServiceTable"
					class="table table-striped table-bordered" cellspacing="0"
					width="100%">
					<thead>
						<tr>
							<!-- Columna oculta para el identificador de usuario -->
							<th></th>
							<th th:text="#{table.valid.service.alias}"></th>
							<th th:text="#{table.valid.service.issuer}"></th>
							<th th:text="#{table.valid.service.subject}"></th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</div>
<div id="modalEditUser"></div>

<script th:inline="javascript">
$(document).ready(function() {
	var actionSave = /*[[@{/savevalidservicekeystore}]]*/;
	var actionUpdate = /*[[@{/updatevalidservicekeystore}]]*/;
	var actionDownload = /*[[@{/downloadCertificate}]]*/;
	var actionDelete = /*[[@{/deletevalidservicekeystore}]]*/;
	var actionLoad = /*[[@{/loadvalidservicekeystore}]]*/;
	var getvalidservices = /*[[@{/validservicekeystoredatatable}]]*/;
	var editTemplate = /*[[@{/editcert}]]*/;
	var addTemplate = /*[[@{/addvalidservicekeystore}]]*/;
	
	var tbl = $('#validServiceTable').DataTable({
		dom: 'Bfrtip',
	    select: 'single',
	    responsive: true,
	    
	    altEditor: true,
	    buttons: [{text: 'Agregar', name: 'add'}, {extend: 'selected',text: 'Editar',name: 'edit'}, {extend: 'selected',text: 'Eliminar',name: 'delete'}, 
	    	{extend: 'selected',text: 'Descargar certificado',name: 'downloadCertificate',
			  action: function ( e, dt, node, config ) {
				  
				  for (var o = dt, a = [], e = 0; e < o.context[0].aoColumns.length; e++) a.push({
					id: o.context[0].aoColumns[e].mData              
				  });
				  
				  var d = dt.rows({
                  selected: !0
				  });
					
				  var idSystemCertificate = d.data()[0][a[0].id];
				  
				  //downloadFile(idSystemCertificate, 'certificate.cer');
				  
				  window.location.href = actionDownload + "/" + idSystemCertificate;
				}
			}],
	
	    "iTotalRecords": "totalElements",
        "iTotalDisplayRecords": "numberOfElements",
	    
		"processing": true,
	    "serverSide": true,
		"ajax": {
	        "url": getvalidservices,
	        "dataSrc" : "data",
	        "data": function (data) {
	        	// Datos a pasar al modal
	            data.formId = "validServForm";
	            data.editTemplate = editTemplate;
	            data.addTemplate = addTemplate;
	        	}
	        },
	    "language": {
	        "url": "js/datatables/i18n/spanish.json",
	        select: {
	            rows: {
	                _: "%d filas seleccionadas",
	                1: "1 fila seleccionada"
	            }
	          }
	        },
		"columns": [
	        { "data": "idSystemCertificate",
	          "visible": false},
	        { "data": "alias" },
	        { "data": "issuer" },
	        { "data": "subject" }
	        ]
		}).on('crudaction', function(e, accion, idSystemCertificate, data, rowindex){
		    // e          Evento Jquery
		    // accion     [add|edit|delete]
		    // pkid       Primer campo en la data [id]                ... en add,    retorna null
		    // data       Los campos adicionales  [campo_1, campo_n]  ... en delete, retorna null
		    // rowindex   El index de la fila para el dataTable       ... en add,    retorna null
		    
		    $('#altEditor-modal .modal-body .alert').remove();
		    // Se muestra la capa 'cargando...'
		    loading();
		    
		    switch(accion){
		    
		 		// Se abre el modal para cargar el almacén de certificados desde el sistema de archivos local del cliente.
		        case 'add':
		        	
		        	// Error de validación al introducir el fichero de almacén.
		        	if ($('#validServForm')[0].checkValidity() === false) {
		        		hide();
		        		// Se oculta la capa 'cargando...'
		                event.stopPropagation();
		                
		                $('#validServForm *').filter(':input').each(function(){
		            	    		            	    
		            	    if(!$(this).checkValidity())
		            	    {
		            	  	 $("#invalid-" + $(this).attr('id')).html();
		            	  	 $("#" + $(this).attr('id')).addClass("is-invalid");
		            	    } else {
		            	  	 $("#" + $(this).attr('id')).removeClass("is-invalid");
		            	    }
		            	    
		            	});
		                
		                // Esto es necesario para forzar que se muestren mensajes de validación de cliente
		                $('<input type="submit">').hide().appendTo($('#validServForm')).click().remove();
		            // No se ha producido error, voy al diálogo de selección de certificados.   
		            } else {
		            	var formData = new FormData(document.forms["validServForm"]);
		            	
		            	$.ajax(actionLoad, {
		            		data : formData,
			            	contentType: false,
			                processData : false,
			                type:'POST',
			                success: function(data){
			                  
			            		// Se oculta la capa 'cargando...'
			            		hide();
			                    			                    
			            		$('#altEditor-modal .modal-body .alert').remove();
								
			            		// Ha ocurrido un error con la contraseña introducida
								if (data.error != null && data.error != '' && data.error != 'undefined') {
									
									$('#altEditor-modal .modal-body').append('<div class="alert alert-danger" role="alert"><strong>' + data.error + '</strong></div>');
									
									if (data.error.toLowerCase().indexOf("contraseña") >= 0) {
										$('#validservicekeystorepass').addClass('is-invalid');
									}

								// No hay error, se muestra la selección de certificados.	
								} else {
									$(".modal-body").html('');
									
									var pick = $(".modal-body").pickList({data: data.lista});
									
									// Se repiten los pickList dentro de modal-body y borramos
									if (pick.length > 1) {
										pick.splice(1, pick.length - 1);
									}
									
									$("#addRowBtn").on("click", function (event) {
										if (pick.getValues() == "") {
											event.stopPropagation();
											event.preventDefault();
											$('#altEditor-modal .modal-body .alert').remove();
								            $('#altEditor-modal .modal-body').append('<div class="alert alert-danger" role="alert"><strong>' + [[#{auth.admin.error.oneMinimum}]] + '</strong></div>');
										} else {
											// Se envían los alias de los certificados a añadir al
											// almacén para autenticación servicio validación
											$.ajax(actionSave, {
												contentType:'application/json',
												data : JSON.stringify(pick.getValues()),
												type:'POST',
												success: function(data){
													// Se oculta la capa 'cargando...'
													hide();
													tbl.row.add($(data.data)).draw(false);
																				
													$('#altEditor-modal .modal-body .alert').remove();
													$('#altEditor-modal').modal('hide');
																				
												},
												error:function(xhr,status,error) {
								                	hide();
								                	var responseText = jQuery.parseJSON(xhr.responseText);
								                	var messageException = responseText.message;
								                	var messageError = "";
								                	
								                	if (messageException.includes("CertificateStored")) {
								                		messageError = [[#{auth.admin.error.certUnique}]];
								                	} else if (messageException.includes("CertificateNotValid")) {
								                		messageError = [[#{auth.admin.error.notValid}]];
								                	} else if (messageException.includes("ValidServiceNotConfigured")) {
								                		messageError = [[#{auth.admin.error.notConfigServiceVal}]];
								                	} else {
								                		messageError = [[#{auth.admin.error.globalError}]];
								                	}
								                	
								                	$('#altEditor-modal .modal-body .alert').remove();
										            $('#altEditor-modal .modal-body').append('<div class="alert alert-danger" role="alert"><strong>' + messageError + '</strong></div>');
								                }
											});
										}
									});
								}
			                    		                    
			                },
			                error:function(data){
			                	
			                	// Se oculta la capa 'cargando...'
			                	hide();
			                	// Se eliminan los posibles errores anteriores...
			                	clearValidationResult('validServForm');
			                	// Se obtiene el JSON de los campos con errores de validación
			                	// y se modifican los estilos/añaden mensajes
			                	var validation = $(data)["0"].responseJSON;
			                	drawValidationResult(validation.fieldErrors);
			              
			                }
			            });
		            }
		        	
		        	$('#validServForm').addClass('was-validated');
		            break;
		        case 'edit':
		        	if ($('#certForm')[0].checkValidity() === false) {
		        		// Se oculta la capa 'cargando...'
		        		hide();
		                event.stopPropagation();
		                
		                $('#certForm *').filter(':input').each(function(){
		            	    		            	    
		            	    if(!$(this).checkValidity())
		            	    {
		            	  	 $("#invalid-" + $(this).attr('id')).html();
		            	  	 $("#" + $(this).attr('id')).addClass("is-invalid");
		            	    } else {
		            	  	 $("#" + $(this).attr('id')).removeClass("is-invalid");
		            	    }
		            	    
		            	});
		                
		                // Esto es necesario para forzar que se muestren mensajes de validación de cliente
		                $('<input type="submit">').hide().appendTo($('#certForm')).click().remove();
		            } else {
		            	$.ajax(actionUpdate, {
			            	dataType : 'json',
			            	contentType:'application/json',
			                data : JSON.stringify(data),
			                type:'POST',
			                success: function(data){
			                  
			            		// Se oculta la capa 'cargando...'
			            		hide();
			                    tbl.row.add($(data.data)).draw(false);
			                    		                    
			                    $('#altEditor-modal .modal-body .alert').remove();
			                    $('#altEditor-modal').modal('hide');
			                    		                    
			                },
			                error:function(data) {
			                	// Se oculta la capa 'cargando...'
			                	hide();
			                	// Se eliminan los posibles errores anteriores...
			                	clearValidationResult('certForm');
			                	// Se obtiene el JSON de los campos con errores de validación
			                	// y se modifican los estilos/añaden mensajes
			                	var validation = $(data)["0"].responseJSON;
			                	drawValidationResult(validation.fieldErrors);
			              
			                }
			            });
		            }
		        	$('#validServForm').addClass('was-validated');
	            	break;
		        case 'delete':
		            $.ajax(actionDelete,{
		            	data:$.param({'id':idSystemCertificate, 'index':rowindex}),
		                type:'POST',
		                success: function(data){
		                    
		                	// Se oculta la capa 'cargando...'
		                	hide();
		                    tbl.row(data.index).remove().draw();
		                    
		                    $('#altEditor-modal .modal-body .alert').remove();
		                    $('#altEditor-modal').modal('hide');
		                },
		                error:function(data){
		                	// Se oculta la capa 'cargando...'
		                	hide();
		                	$('#altEditor-modal .modal-body .alert').remove();
		                	$('#altEditor-modal #deleteRowBtn').remove();
				            $('#altEditor-modal .modal-body').append('<div class="alert alert-danger" role="alert"><strong>' + data.responseJSON.message + '</strong></div>');
		                }
		            });
		            break;
		        default:
		            $('#altEditor-modal .modal-body .alert').remove();
		            $('#altEditor-modal .modal-body').append('<div class="alert alert-danger" role="alert"><strong>' + [[#{alarm.admin.error.NotAuthorized}]] + '</strong></div>');
		            break;
		    }
		});
});	

function str2bytes (str) {
    var bytes = new Uint8Array(str.length);
    for (var i=0; i<str.length; i++) {
       bytes[i] = str.charCodeAt(i);
     }
     return bytes;
 } 
function downloadFile(idSystemCertificate , fileName) {
 loading();
 
 var downloadFile =/*[[@{/downloadFile}]]*/;
 
 $.ajax({
       type: "POST",
       data:$.param({'idSystemCertificate':idSystemCertificate}),
       url: downloadFile,
       success: function(data) {
             hide();
             var blob = new Blob([str2bytes(data)], {type: "application/x-x509-ca-cert"});
                               
             var link=document.createElement('a');
             link.href=window.URL.createObjectURL(blob);
             link.download=fileName;
             link.target="_blank";
             link.click();

}
})
 
} 


</script>